<template>
  <div class="home">
    <div id="Product_Category">
        <p id="Product_Category2">
          <span id="Product_Category3">商品订单</span>
        </p>
      </div>
    <el-card shadow="never">
      <div id="ProducFrom" class="flex">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row>
            <el-col :span="3">
              <div class="grid-content bg-purple">
      <!-- 搜索关键词 -->
                  <el-form-item label="">
                    <el-input
                      v-model="formInline.user"
                      placeholder="搜索关键词" 
                    ></el-input>
                  </el-form-item>
              </div></el-col>

            <el-col :span="3">
              <div class="grid-content bg-purple-light">
      <!-- 订单状态 -->
                  <el-form-item label="">
                    <el-select v-model="formInline.order_state" placeholder="订单状态" >
                      <el-option label="待确认" value="待确认"></el-option>
                      <el-option label="已确认" value="已确认"></el-option>
                      <el-option label="删除" value="删除"></el-option>
                    </el-select>
                  </el-form-item>          
                </div></el-col>

            <el-col :span="3">
              <div class="grid-content bg-purple">
      <!-- 付款状态 -->
                <el-form-item label="">
                  <el-select v-model="formInline.payment_state" placeholder="付款状态">
                    <el-option label="待付款" value="待付款"></el-option>
                    <el-option label="已付款" value="已付款"></el-option>
                    <el-option label="已退款" value="已退款"></el-option>
                  </el-select>
                </el-form-item>          
                </div></el-col>

            <el-col :span="8">
              <div class="grid-content bg-purple-light">
      <!-- 时间范围选择 -->
                  <el-date-picker
                    v-model="value2"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions" id="el_date_picker">
                  </el-date-picker>          
                </div></el-col>

            <el-col :span="3">
              <div class="grid-content bg-purple">
      <!-- 付款状态 -->
                <el-form-item label="">
                  <el-select v-model="formInline.payment_mode" placeholder="付款方式">
                    <el-option label="全部" value="全部"></el-option>
                    <el-option label="对公账户" value="对公账户"></el-option>
                    <el-option label="现金" value="现金"></el-option>
                  </el-select>
                </el-form-item>        
                </div></el-col>
                
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
      <!-- 查询 -->
                  <el-form-item>
                    <el-button id="product_query" type="primary" @click="onSubmit"
                      >查询</el-button
                    >
                  </el-form-item>

      <!-- 导出商品 -->
                  <el-form-item>
                    <el-button id="export" type="add" @click="OrderExport"
                      >导出</el-button
                    >
                  </el-form-item>
                <!-- </el-form> -->
                </div></el-col>
          </el-row>
      </el-form>
    </div>

 <!-- 商品表格 -->
      <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          ref="multipleTable"
          :header-cell-style="{background:'RGB(238, 239, 246, 0.34)',color:'#606266'}"  
        >
          <el-table-column type="selection"  align="center">
          </el-table-column>
          <el-table-column
            fixed
            prop="Order_number"
            label="订单编号"
          
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="VIP"
            label="会员"
    
            align="center"
          >
          
          </el-table-column>
          <el-table-column
            prop="order_state"
            label="订单状态"

            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="all_amount"
            label="订单总金额"
  
            header-align="center"
            align="center"
          >
          </el-table-column>

<!-- 操作 -->
          <!-- <el-table-column fixed="right" label="操作" :cell-style="{'text-align':'center'}"> -->
          <el-table-column  label="操作" align="center">
<!-- 商品编辑按钮 -->
            <template>
              <el-button type="text"  @click="product_order">订单处理</el-button>
            </template>
<!-- 商品删除按钮 -->
            <template>
              <el-button type="text" @click="del">删除</el-button>
            </template>

          </el-table-column>
        </el-table>

<!-- 表格尾部 -->
        <div class="table_footer">
          <!-- <el-row> -->
            <el-row>
              <el-col :span="2" >
                <div class="grid-content bg-purple">
                  <el-checkbox id="select_all" v-model="checked"
                    value="checkbox"
                    @change="toggleSelection([tableData])"
                    >全选</el-checkbox
                  >
                </div>
              </el-col >
  
              <el-col :span="5" >
                <div class="grid-content bg-purple-light">
                  <el-select v-model="value" placeholder="批量操作">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value" >
                    </el-option>
                  </el-select>
               </div>
              </el-col>
            
            
              <el-col :span="2"
                ><div class="grid-content bg-purple">
                  <el-button >确定</el-button>
                </div></el-col >
              
            
            <p class="paging">
              <el-col :span="15"
                ><div class="grid-content bg-purple-light">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000"
                  >
                  </el-pagination></div
              ></el-col>
            </p>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>
<style lang="less" scoped>
    *{
    margin: 0;
    padding: 0;
  }

  .flex {
    display: flex;
  }
//顶部from栅格布局
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 0px;
  }

// 顶部标签背景
  #Product_Category {
  width: 100%;
  height: 49px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #333333;
  display: flex;
  background: -webkit-linear-gradient(
    0deg,
    rgba(81, 81, 81, 1) 0%,
    rgba(81, 81, 81, 1) 0%,
    rgba(174, 174, 174, 1) 100%,
    rgba(174, 174, 174, 1) 100%
  );
  #Product_Category2 {
    display: flex;
    align-items: center;
    span {
      align-items: center;
      padding-left: 10px;
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #999999;
      border-left: rgba(30, 159, 255, 1) solid 4px;
      margin-left: 10px;
      font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
    }
  }
}

// 时间范围选择css
#el_date_picker{
  width: 200px;
}

// 商品表单的表单css
#ProducFrom {
  width: 100%;
  flex-wrap: nowrap;
  .el-form-item {
    margin-right: 10px;
    #product_query {
      margin-left: -10px;
    }
    #add_product {
      margin-left:-10px;
    }
  }
}

// 商品表格的表格css
.table_footer{
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  align-items:center;
  .paging{
   display: flex;
   justify-content:  flex-end;
   align-items:center;
   padding: 0;
    .grid-content{
      align-items:center;
      .el-pagination{
        margin-top: 10px;
        height: 50px;
        line-height: 50px;
      }
    }
  }
}
</style>
<script>
export default {
  data(){
    return{
      value:"",
// 商品heard,from表单
     checked: false,
       formInline: {
        user: "",
        region: "",
        order_state:"",
        payment_state:"",
        payment_mode:"",
      },

// 选择商品分类
      options: [
        {
          value: '选项1',
          label: '批量设为已发货'
          
        },
        {
           value: '选项2',
           value: "删除",
        }
      ],

// 时间范围选择
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        
        },

        value1: '',
        value2: '',

// 表格数据
      tableData: [
        {
          Order_number: "555555",
          VIP: "小弟",
          order_state: "代付款",
          all_amount:"￥10.000.00"
        },
        {
          Order_number: "555555",
          VIP: "小弟",
          order_state: "代付款",
          all_amount:"￥10.000.00"
        },
        {
          Order_number: "555555",
          VIP: "小弟",
          order_state: "代付款",
          all_amount:"￥10.000.00"
        },
        {
          Order_number: "555555",
          VIP: "小弟",
          order_state: "代付款",
          all_amount:"￥10.000.00"
        },
        {
          Order_number: "555555",
          VIP: "小弟",
          order_state: "代付款",
          all_amount:"￥10.000.00"
        },
        {
          Order_number: "555555",
          VIP: "小弟",
          order_state: "代付款",
          all_amount:"￥10.000.00"
        },
      ],
      multipleSelection: [],
    }
  },
  methods:{
// 查询
    onSubmit() {
      console.log("submit!");
    },

// 导出
    OrderExport() {
      console.log("OrderExport");
    },

//订单处理
    product_order(){
        this.$router.push('processingorderst');
    },

// 表格全选
    toggleSelection(rows) {
      console.log(rows);
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleAllSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

// 表格操作删除
  del(){
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  }
}
</script>